import React, { useRef, useEffect, useState } from 'react'
import { withRouter } from 'react-router-dom'
import { BrowserQRCodeReader } from '@zxing/library';

import "./index.scss"
function Camera(props) {
    const decoDing = useRef(null)
    const result = useRef(null)
    const alert = () => {
        const decodingStyle = decoDing.current.value
        if (decodingStyle == decoDing.current.value) {
            decodeOnce(codeReader, selectedDeviceId)
        }
    }
    useEffect(() => {
        alert()
    }, [result])

    const decodeOnce = (codeReader, selectedDeviceId) => {
        codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {

            window.location.href = result.text


        }).catch((err) => {
            console.error(err)

        })
    }
    let selectedDeviceId;
    const codeReader = new BrowserQRCodeReader()
    return (
        <div className="container" id="demo-content">
            {/* <div></div> */}
            <div className='vid' style={{ height: "100vh" }}>
                <div className='close' 
                    onClick={()=>{
                        props.history.push("/Layout/Home")
                    }}
                > X  </div>

                <video id="video" >

                </video>
                <div className='video_alert_xian'></div>

                <div className='video_alert'></div>
            </div>

            <div id="sourceSelectPanel" style={{ display: "none" }}>
                <label style={{ display: "none" }}>Change video source:</label>
                <select id="sourceSelect" style={{ maxWidth: '400px', display: 'none' }}>
                </select>
            </div>

            <div style={{ display: "none" }}>
                <label > Decoding Style:</label>
                <select id="decoding-style" size="1" ref={decoDing}>
                    <option value="once">Decode once</option>
                    <option value="continuously">Decode continuously</option>
                </select>
            </div>
            <pre><code ref={result} id="result"></code></pre>

        </div>
    )
}

export default withRouter(Camera)